<!--新建选择题界面-->
<template>
  <div>
    <el-menu class="el-menu-demo" background-color="#d9ecff">
      <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
        <img src="../assets/heima.png" alt="">
        <a style="margin-left: 10px">课程学习与认证管理系统</a>
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-button type="primary" @click="returnLogin">退出登录</el-button>
      </el-menu-item>
    </el-menu>
    <el-row>
      <el-col :span="(!isCollapse)? 4:1" style=";margin-top: 10px">
        <el-menu default-active="2-2-1" :collapse="isCollapse" :collapse-transition="false">
          <div class="toggle-button" @click="toggleCollage">|||</div>
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title" @click="toCourseManagement">课程管理</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">单元信息</span>
            </template>
            <el-menu-item index="2-1" @click="toVideo">单元视频</el-menu-item>
            <el-submenu index="2-2">
              <span slot="title">单元测试</span>
              <el-menu-item index="2-2-1">选择题</el-menu-item>
              <el-menu-item index="2-2-2" @click="toTrueOrFalseQuestion">判断题</el-menu-item>
              <el-menu-item index="2-2-3" @click="toBlankQuestion">填空题</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">课程证书</span>
            </template>
            <el-menu-item index="3-1">暂未开发</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="4-1">暂未开发</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">管理员管理</span>
            </template>
            <el-menu-item index="5-1">暂未开发</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
        <el-row>
          <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item style="font-size: x-large" @click.native="returnUnitInformation">单元信息
              </el-breadcrumb-item>
              <el-breadcrumb-item style="font-size: x-large">单元测试</el-breadcrumb-item>
              <el-breadcrumb-item style="font-size: x-large">选择题</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
        <el-col v-for="(item,index) in choiceQuestion" :key="index" :span="11" :offset="2"
                style="background-color: aliceblue;margin: 30px">
          <el-card shadow="always" id="item.id">
            <div slot="header">
              <label>题干: </label>
              <span>{{ " " + item.subject }}</span>
            </div>
            <div>
              <label>选项: </label>
              <span v-for="(item1,index1) in item.choiceQuestionOptions"
                    :key="index1">{{ String.fromCharCode(65 + index1) + "." + item1.content + " " }}</span>
            </div>
            <el-divider class="el-divider-ff"></el-divider>
            <div style="margin-bottom: 14px">
              <div v-for="(item1,index1) in item.choiceQuestionOptions" :key="index1">
                <span
                  v-if="item1.id ===item.answerOptionId">{{ "正确答案： " + String.fromCharCode(65 + index1) + "." + item1.content }}</span>
                <span style="float: right" v-if="item1.id === item.answerOptionId">{{ index + 1 }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="添加选择题" :visible.sync="dialogFormVisible">
      <el-form :model='add_questionForm'>
        <el-form-item label="题干" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="add_questionForm.subject"></el-input>
        </el-form-item>
        <el-form-item label="选项A" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="add_questionForm.option[0]"></el-input>
        </el-form-item>
        <el-form-item label="选项B" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="add_questionForm.option[1]"></el-input>
        </el-form-item>
        <el-form-item label="选项C" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="add_questionForm.option[2]"></el-input>
        </el-form-item>
        <el-form-item label="选项D" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="add_questionForm.option[3]"></el-input>
        </el-form-item>
        <el-form-item label="正确答案" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="add_questionForm.answerOption"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addquestion">确 定</el-button>
      </div>
    </el-dialog>
    <div style="position: fixed;right: 120px; bottom: 110px">
      <el-button class="circle_button" type="primary" @click="add">+</el-button>
    </div>
  </div>
</template>

<script>
import { post } from '@/common/serviceUtil'

export default {
  name: 'ChoiceQuestion',
  data () {
    return {
      course_unit_choice: {
        courseId: '',
        courseUnitId: ''
      },
      add_questionForm: {
        subject: '',
        answerOption: '',
        option: [],
        courseUnitId: ''
      },
      formLabelWidth: '120px',
      isCollapse: false,
      choiceQuestion: [],
      choiceQuestionOptions: [],
      dialogFormVisible: false
    }
  },
  methods: {
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    }, // 退出登录按钮
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    }, // 导航栏开关
    returnUnitInformation () {
      this.$router.push({
        name: 'UnitInformation',
        path: '/UnitInformation',
        params: {
          UnitId: this.course_unit_choice.courseUnitId,
          courseID: this.course_unit_choice.courseId
        }
      })
    }, // 返回单元信息界面
    GetCQAllM () {
      post('//localhost:8088/choiceQuestion/getChoiceQuestions', this.course_unit_choice).then((response) => {
        // console.log(response)
        this.choiceQuestion = response.data.data
      })
    },
    add () {
      this.dialogFormVisible = true
    },
    addquestion () {
      if (this.add_questionForm.subject === null) alert('请输入题干')
      // eslint-disable-next-line no-unused-vars
      var flag = false
      for (let i = 0; i < 4; i++) {
        if (this.add_questionForm.answerOption === this.add_questionForm.option[i]) {
          this.add_questionForm.answerOption = i
          flag = true
        }
      }
      if (flag) {
        console.log(this.add_questionForm)
        post('//localhost:8088/choiceQuestion/add', this.add_questionForm).then((response) => {
          console.log(response)
          this.dialogFormVisible = false
          this.GetCQAllM()
        })
      } else {
        alert('请输入正确的答案')
      }
    },
    toVideo () {
      this.$router.push({
        name: 'Video',
        path: '/Video',
        params: { courseUnitId: this.course_unit_choice.courseUnitId, courseId: this.course_unit_choice.courseId }
      })
    },
    toTrueOrFalseQuestion () {
      this.$router.push({
        name: 'TrueOrFalseQuestions',
        path: '/TrueOrFalseQuestions',
        params: { UnitId: this.course_unit_choice.courseUnitId, courseId: this.course_unit_choice.courseId }
      })
    },
    toBlankQuestion () {
      this.$router.push({
        name: 'BlankQuestion',
        path: '/BlankQuestion',
        params: { UnitId: this.course_unit_choice.courseUnitId, courseId: this.course_unit_choice.courseId }
      })
    },
    toCourseManagement () {
      this.$router.push('/CourseManagement')
    }
  },
  mounted () {
    this.course_unit_choice.courseId = this.$route.params.CourseId // 获取对应课程ID
    this.course_unit_choice.courseUnitId = this.$route.params.UnitId // 获取对应的单元ID
    this.add_questionForm.courseUnitId = this.$route.params.UnitId
    this.GetCQAllM()
  }
}
</script>

<style lang="less" scoped>
.toggle-button {
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size: 10px;
  // 设置文本行高
  line-height: 24px;
  // 设置文本颜色
  color: #fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor: pointer;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.circle_button {
  border-radius: 70%;
  font-size: 40px;
  border-color: #3a8ee6;
  background-color: #3a8ee6;
  z-index: 99999;
}

.el-menu-item {
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d9ecff;
  }
}
</style>
